<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        通配符
        id #
        类 .
        元素 元素名
        后代 空格
        分组 , (结合符)
        属性选择器
            <!--存在和属性值选择器 css2-->
            [attr]:包含attr属性，不论其值为何
            [attr=val]:attr属性值为val的元素
            [attr~=val]:attr属性是一个以空格为分隔的值列表，且其中一个值为val
            <!--字串值属性选择器 css3-->
            [attr|=val]:attr属性值是val或以val-开头
            [attr^=val]:attr属性值以val开头
            [attr$=val]:attr属性值以val结尾
            [attr*=val]:attr属性值包含字串val
         */
        * {
            margin: 0;
            padding: 0;
        }
        h1,h2,h3 {
            color: pink;
        }
        #wrap h1 {
            color: deeppink;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <h1>h1</h1>
        <h2>h2</h2>
        <h3>h3</h3>
        <ul>
            <li attribute="custom-attr">1-1</li>
            <li>2-1</li>
            <li>3-1</li>
        </ul>
    </div>
</body>
</html>
